<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  .box1 {
    /* color module,有些浏览器不支持，推荐用下面的写法来写 */
    /* webpack->postcss->browserslist->reba */
    /* color:#ff000000;
     */
    /* color:rgba(255,0,0,.1); */
    /* 通过颜色来隐藏 */
    /* color:rgba(0,0,0,0,); */
  /* 通过背景颜色透明度来隐藏 */
  background-color:rgba(0,0,0,0,);
  /* 背景颜色默认是透明的，就是上面那个值 */
  background-color: transparent;
  }
  .box2{
    /* alpha只会设置当前自身透明度为一个值，并不会对子元素有任何颜色，要么是颜色透明度，要么是背景颜色透明度 */
    /* opacity；设置透明度会携带所有的子元素 */
    opacity: 0.5;
  }
  
  </style>
</head>
<body>
  <div class="box1">我是box1
    <img src="../images/diqiu.jpg" alt="">
  </div>
  <div class="box2">我是box2元素
    <img src="../images/muxing.jpg" alt="">

  </div>



</body>
</html>